import React, { useState } from 'react';
import { SelectColumn, GridTable, obj_str, Title, useHigh, MainView, PanelTitle, Btn, loc } from 'sui';

const BindView = ({ col, cur, hreturn, hcmd, main, title=loc("l_865") }) => {
    const [select, hselect] = useState(new Set());
    const [high] = useHigh(140, 100);

    const hdone = () => {
        if (select.size <= 0) {
            return hreturn();
        }

        const ret = [];
        for (const d of select) {
            ret.push(d);
        }

        hcmd(ret);
    };

    const Left = () => (
        <div className="inline-flex items-center">
            <Title mod={obj_str(cur, "sn")} sub={title}/>
            <div className="ml-10 bg-teal-300 px-3 pt-2 pb-1">{loc("l_896")}<span className="ml-6">{select.size}</span></div>
        </div>
    );

    const Right = () => (
        <div className="inline-flex items-center">
            <Btn hcmd={hdone} className="mr-4">{loc("l_541")}</Btn>
            <Btn hcmd={hreturn}>{loc("l_227")}</Btn>
        </div>
    );

    const getCol = () => {
        return [
            SelectColumn,
            ...col,
        ];
    };

    return (
        <MainView>
            <PanelTitle left={<Left/>} right={<Right/>} cl="gray"/>
            <GridTable high={high} col={getCol()} row={main} select={select} hselect={hselect} hget={d => d.sn}/>
        </MainView>
    );
};

export {BindView};
